<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6&proxy</title>
</head>

<body>

    <div>ES6 proxy</div>
    <script>
        var pro = new Proxy({
            add:function(val){
                return val+10
            },
            name:'nihao',
            age:19
        },{
            get:function(target,key,property){
                console.log(target,key,property)
                console.log('come in get')
                return target[key]
            },
            set:function(target,key,value,receiver){
                console.log(`setting ${key} = ${value}`)
                return target[key] = value
            }
        })
        console.log(pro.name)
        pro.name= 'xiaohui'
        console.log(pro)
        // 如果handler没有设置任何拦截，那就等同于直接通向原对象。

           var target = function(){
                return "I'm a beautiful girl"
            }
            var handler={
                apply(target,cts,args){
                    console.log(target,cts,args)
                    console.log('do apply')
                    return Reflect.apply(...arguments)
                    // return [...arguments]
                }
            }
            var pro = new Proxy(target,handler);
            console.log(pro())

        //         var obj = new Proxy({}, {
        //     get: function (target, key, receiver) {
        //         console.log(`getting ${key}!`);
        //         return Reflect.get(target, key, receiver);
        //     },
        //     set: function (target, key, value, receiver) {
        //         console.log(`setting ${key}!`);
        //         return Reflect.set(target, key, value, receiver);
        //     }
        //     });
        //    var proxy = new Proxy({},{
        //        get:function(target,property){
        //         return 35
        //        }
        //    })
        var handler = {
            get: function (target, name) {
                if (name === 'prototype') {
                    return Object.prototype;
                }
                return 'Hello, ' + name;
            },

            apply: function (target, thisBinding, args) {
                return args[0];
            },

            construct: function (target, args) {
                return { value: args[1] };
            }
        };

        var fproxy = new Proxy(function (x, y) {
            return x + y;
        }, handler);

        fproxy(1, 2) // 1
        new fproxy(1, 2) // {value: 2}
        fproxy.prototype === Object.prototype // true
        fproxy.foo === "Hello, foo" // true

    </script>
</body>

</html>